<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="mount"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';

const chartData = ref({});
const opts = reactive({
  color: ["#1890FF"],
  padding: [15,15,0,5],
  enableScroll: false,
  legend: {},
  xAxis: {
    disableGrid: true
  },
  yAxis: {
    data: [
      {
        min: 0
      }
    ]
  },
  extra: {
    mount: {
      type: "mount",
      widthRatio: 1.5
    }
  }
});

const getServerData = () => {
  setTimeout(() => {
    const res = {
      series: [
        {
          data: [
            {"name":"周一","value":85},
            {"name":"周二","value":0},
            {"name":"周三","value":0},
            {"name":"周四","value":0},
            {"name":"周五","value":0},
			{"name":"周六","value":0},
			{"name":"周日","value":0}
          ]
        }
      ]
    };
    chartData.value = JSON.parse(JSON.stringify(res));
  }, 500);
};

onMounted(() => {
  getServerData();
});
</script>

<style scoped>
.charts-box {
  width:100%;
  height:90%;
}
</style>